<template>
    <div>
        <div class="header">
            <el-form :inline="true" :model="searchForm">
                <el-form-item label="账号名称">
                    <el-input v-model="searchForm.account" placeholder="请输入账号名称" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button @click="handleSearch">查询</el-button>
                </el-form-item>
            </el-form>
            <el-button>新增</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="用户名" prop="account">
            </el-table-column>
            <el-table-column label="等级" prop="level">
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    {{ scope.$index }}
                    {{ scope.row }}
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="deleteAccount(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { ref } from 'vue'
// 获取mock当中的api
import { getDataApi, deleteAccountApi } from '../utils/mockServer/db'

import { ElMessage, ElMessageBox } from 'element-plus'

// 定义搜索表单内容
const searchForm = ref({
    account: ''
})

// 定义列表数据
const tableData = ref([])

// 获取全部数据
const getData = (account) => {
    tableData.value = getDataApi({ account })
    // console.log(getDataApi({account}));
}

getData()

// 搜索操作
const handleSearch = () => {
    getData(searchForm.value.account)
}

// 删除操作
const deleteAccount = (row) => {
    console.log('row', row);

    ElMessageBox.confirm(
        '是否要删除该账号',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // 调用后台接口，执行删除操作
            deleteAccountApi(row)

            ElMessage({
                type: 'success',
                message: '删除成功',
            })

            // 从新获取数据
            handleSearch()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除取消',
            })
        })

    
}


</script>

<style scoped>
.header {
    display: flex;
    justify-content: space-between;
}
</style>